import React, { useState, useEffect } from 'react'
import { useParams } from 'react-router-dom'
import {
  Card,
  Row,
  Col,
  Tree,
  Tag,
  Pagination,
  Table,
  Button,
  message,
} from 'antd'
import type { ColumnsType } from 'antd/es/table'
import type { TreeProps } from 'antd/es/tree'
import {
  IdepList,
  IscheduleRuleList,
  IscheduleDetailList,
  IsheduleDetailItem,
} from '@api/hospital/hospitalList/model/hospitalListTypes'
import {
  reqGetDepList,
  reqGetScheduleRules,
  reqGetScheduleDetail,
} from '@api/hospital/hospitalList'
import '../index.css'

const columns: ColumnsType<IsheduleDetailItem> = [
  {
    title: '序号',

    render: (a, b, index) => index + 1,
    align: 'center',
  },
  {
    title: '职称',
    dataIndex: 'title',
  },
  {
    title: '号源时间',
    dataIndex: 'workDate',
  },
  {
    title: '可预约数',
    dataIndex: 'availableNumber',
  },
  {
    title: '剩余预约数',
    dataIndex: 'reservedNumber',
  },
  {
    title: '挂号费(元)',
    dataIndex: 'amount',
  },
  {
    title: '擅长技能',
    dataIndex: 'skill',
  },
]

// let depcode: string // 用来存储当前科室的编码
export default function HospitalListSchedule() {
  // 获取路由参数: 医院编码(hoscode)
  const { hoscode } = useParams()

  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(5)
  const [total, setTotal] = useState(0)
  // 存储所有科室数据的状态
  const [depList, setDepList] = useState<IdepList>([])
  // 存储所有的一级科室depcode的状态
  const [oneDepCodes, setOneDepCodes] = useState<string[]>([])

  // 存储指定科室的排班规则的状态
  const [scheduleRules, setScheduleRules] = useState<IscheduleRuleList>([])

  // 面包屑相关的状态
  const [hosname, setHosname] = useState('')
  const [depname, setDepname] = useState('')
  const [workDate, setWorkDate] = useState('')

  // 存储排班详情的数据状态
  const [sheduleDetails, setScheduleDetails] = useState<IscheduleDetailList>([])

  // 定义状态存储当前科室的编码
  const [depcode, setDepCode] = useState('')

  useEffect(() => {
    // 获取科室数据
    getDepList()
  }, [])

  // 获取科室数据的方法
  async function getDepList() {
    const result = await reqGetDepList(hoscode as string)
    // 给所有的一级科室对象添加disabled:true的内容
    result.forEach((item) => {
      item.disabled = true
    })
    // 对所有科室数据进行遍历,得到一个存储了所以一级科室的depcode的数组
    const depCodes = result.map((item) => item.depcode)
    setOneDepCodes(depCodes)
    setDepList(result)

    setDepCode(result[0].children[0].depcode)
    getScheduleRules(page, pageSize, result[0].children[0].depcode)
    setDepname(result[0].children[0].depname)
  }

  // 获取指定科室的排班规则数据的方法
  async function getScheduleRules(
    page: number,
    pageSize: number,
    depcode: string
  ) {
    const result = await reqGetScheduleRules(
      page,
      pageSize,
      hoscode as string,
      depcode
    )
    setScheduleRules(result.bookingScheduleList)
    setTotal(result.total)
    setHosname(result.baseMap.hosname)
    setWorkDate(result.bookingScheduleList[0]?.workDate)
    // 如果某个科室没有数据,则提示用户,当前科室没有数据,并且我们希望能够清空排班详情
    if (!result.bookingScheduleList.length) {
      //清空排班详情
      setScheduleDetails([])
      return message.error('当前科室暂无数据')
    }

    getScheduleDetails(depcode, result.bookingScheduleList[0]?.workDate) // 获取排班详情
  }

  // 获取排班详情的函数
  async function getScheduleDetails(depcode: string, workDate: string) {
    const result = await reqGetScheduleDetail(
      hoscode as string,
      depcode,
      workDate
    )
    setScheduleDetails(result)
  }
  // 选择了科室触发了函数
  const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
    // 选择了新的科室,所以需要将状态中存储的科室编码重新存储起来
    setDepCode(selectedKeys[0] as string)
    // 获取排班规则数据
    getScheduleRules(1, pageSize, selectedKeys[0] as string)
    setPage(1)

    // 修改面包屑的科室名称
    setDepname((info.node as any).depname)
  }

  return (
    <Card>
      <p>
        选择：{hosname} / {depname} / {workDate}
      </p>
      {/* 
      Row是antd中提供的用于实现栅格系统的组件,代表一行
      Col 是配合Row组件使用的,表示一列
      在Col组件上写span属性,表示这一列在一行中占多少份. 一行共24份
      Row组件的gutter属性,用来空值列之间的间隔
       */}
      <Row gutter={20}>
        <Col
          style={{ border: '1px solid #ccc', overflow: 'scroll', height: 400 }}
          span={5}
        >
          <Tree
            // checkable // tree组件中展示复选框
            // 默认展示的树节点的key
            // defaultExpandedKeys={oneDepCodes} //注意: 以default开头的配置属性只在第一次组件创建的时候才会生效
            // 可以让节点展开,并且支持数据变化
            expandedKeys={oneDepCodes}
            // 默认选中的树节点的key
            // defaultSelectedKeys={['0-0-0', '0-0-1']}
            // 选中的树节点的key
            selectedKeys={[depcode]}
            // 默认复选框被选中的树节点的key
            // defaultCheckedKeys={['0-0-0', '0-0-1']}
            // 选中节点的事件处理函数
            onSelect={onSelect}
            // 选中节点对应的复选框的事件处理函数
            // onCheck={onCheck}
            // 树结构要展示的数据
            treeData={depList as any}
            // 默认Tree组件使用数据里面的title和key属性的值.但是真实数据没有title和key,所以进行配置,告诉Tree组件,使用depname当做title去渲染文本,使用depcode当做key作为每一个节点的id
            fieldNames={{
              title: 'depname',
              key: 'depcode',
            }}
          />
        </Col>
        <Col span={19}>
          {scheduleRules.map((item) => (
            <Tag
              key={item.workDate}
              color={item.workDate === workDate ? 'green' : ''}
              className="space"
              style={{ cursor: 'pointer' }}
              onClick={() => {
                setWorkDate(item.workDate)
                getScheduleDetails(depcode, item.workDate)
              }}
            >
              <div>
                {item.workDate} {item.dayOfWeek}
              </div>
              <div>
                {item.availableNumber} / {item.reservedNumber}
              </div>
            </Tag>
          ))}

          {/* 之前在Table中使用分页器: <Table pagination={{total...}} /> . 在直接使用Pagination组件时,写的props属性和原来在table里,pagination对象里面写的都一样*/}
          <Pagination
            total={total}
            pageSize={pageSize}
            current={page}
            showSizeChanger={true}
            pageSizeOptions={[2, 5, 10]}
            onChange={(page, pageSize) => {
              setPage(page)
              setPageSize(pageSize)
              // 重新获取当前页的排班规则
              getScheduleRules(page, pageSize, depcode)
            }}
          ></Pagination>

          <Table
            style={{ marginTop: 20, marginBottom: 20 }}
            columns={columns}
            dataSource={sheduleDetails}
            bordered
            // 隐藏Table内置的分页器
            pagination={false}
            rowKey={'id'}
          />
          <Button>返回</Button>
        </Col>
      </Row>
    </Card>
  )
}
